import Vue from 'vue'
import Vuex from 'vuex'
import { message } from 'ant-design-vue';
Vue.use(Vuex)
const defaultComponent = { id: 0, type: "default", name: "页面" }
export default new Vuex.Store({
    state: {
        num: 1,
        loginStatus: {},
        token: "",
        tagsList: [],
        activeComponent: defaultComponent,
        dragComponent: null,//记录当前所拖拽的组件
        components: [],
        pageInfo: {
            pageBaseInfo: {
            },//页面基本配置
            pageShareInfo: {},//页面分享配置
        },
        contextMenu: {
            top: 0,
            left: 0,
            //菜单类型
            type: 'component',
            //显示或隐藏右键自定义菜单
            show: false
        }
    },
    mutations: {
        //添加面包屑导航x
        addTags(state, breadItem) {
            const breadMenuList = state.breadMenuList
            if (breadMenuList.length === 0) {
                state.breadMenuList.push(breadItem)
            } else {
                for (let i = 0; i < state.breadMenuList.length; i++) {
                    console.log(state.breadMenuList[i].id !== breadItem.id)
                    if (state.breadMenuList[i].id !== breadItem.id) {
                        state.breadMenuList.push(breadItem)
                    }
                }
            }


        },
        //删除面包屑导航
        closeTags(state, breadItem) {
            const breadMenuList = state.breadMenuList
            let index = breadMenuList.findIndex((item, i) => {
                return item.id == breadItem.id

            })
            state.breadMenuList.splice(index)
        },
        //展示右击菜单
        isShowContextMenu(state, { top, left, show }) {
            const contextMenu = state.contextMenu;
            contextMenu.show = show;
            contextMenu.top = top
            contextMenu.left = left
        },
        /**
         * 设置pageBaseInfo(页面基本信息)/pageShareInfo(页面分享信息)
         * @param {*} state 
         * @param {*} props 属性值,添加字段类型(基本信息/分享信息)/字段名称/字段值
         */
        setPageProps(state, props) {
            let { type, name, value } = props;
            const pageBaseInfo = state.pageInfo.pageBaseInfo;
            const pageShareInfo = state.pageInfo.pageShareInfo;
            if (type === "base") {
                Vue.set(pageBaseInfo, name, value)
            } else if (type === "share") {
                Vue.set(pageShareInfo, name, value)
            }
        },
        /**
         * 动态添加组件中的数据为响应式数据
         * 
         * @param {} state 
         * @param {*} props 属性值:组件ID/添加字段的类型(样式/内容)/添加的字段名称/添加字段的值
         */
        setComponentProps(state, props) {
            let { id, node, name, value } = props;
            const components = state.components;
            let result = components.find((item) => {
                if (item.id == id) {
                    return result = item
                }
            })
            if (result) {
                if (result.hasOwnProperty(node)) {
                    Vue.set(result[node], name, value)
                } else {
                    Vue.set(result, node, {
                        [name]: value
                    })
                }
            }
        },
        //设置当前所选中的组件
        setCurrentComponents(state, component) {
            let components = state.components
            let activeComponent = state.activeComponent
            if (component === "default") {
                state.activeComponent = defaultComponent
            } else {
                //切换组件之前检测是否设置内容
                if (activeComponent.type !== "default") {
                    let item = components.find((i) => {
                        if (activeComponent.id == i.id) {
                            return item = i
                        }
                    })
                    if (item) {
                        if (!activeComponent.contentSetting) {
                            message.warning(`${item.name}组件还未编辑内容哦~`);
                        }
                        Vue.set(item, "isError", !activeComponent.contentSetting)
                    }
                }
                state.activeComponent = component;
            }
        },
        //记录当前所拖拽的单个组件
        setDragComponent(state, component) {
            state.dragComponent = component
        },
        //添加自定位置的组件
        addRelativeComponents(state, { relativeType, relativeComponent, component }) {
            let components = state.components
            let index = components.findIndex((item, index) => {
                if (item.id === relativeComponent.id) {
                    return true
                }
            })
            switch (relativeType) {
                //上个兄弟节点
                case 'pre':
                    components.splice(index, 0, component)
                    break;
                //下个兄弟节点
                case 'next':
                    components.splice(index + 1, 0, component)
                    break;
            }
        },
        //页面尾部直接添加
        addComponents(state, component) {
            state.components.push(component)
        },
        //删除页面中存在的组件
        deleteComponent(state, component) {
            const components = state.components
            let index = components.findIndex((item, index) => {
                if (item.id === component.id) {
                    return true
                }
            })
            components.splice(index, 1)
        },
        // 更新组件所在的位置
        updateComponent(state, { component, type }) {
            const components = state.components
            let index = components.findIndex((item, index) => {
                if (item.id === component.id) {
                    return true
                }
            })
            if (index != -1) {
                switch (type) {
                    //上移
                    case 'up':
                        if (index != 0) {
                            components.splice(index, 1)
                            components.splice(index - 1, 0, component)
                        } else {
                            message.warning('到顶啦~');
                        }
                        break;
                    //下移
                    case 'down':
                        if (index != components.length - 1) {
                            components.splice(index, 1)
                            components.splice(index + 1, 0, component)
                        } else {
                            message.warning('到底啦~');
                        }
                        break;
                    //置顶
                    case 'top':
                        if (index != 0) {
                            components.splice(index, 1)
                            components.splice(0, 0, component)
                        } else {
                            message.warning('到顶啦~');
                        }
                        break;
                    //置底
                    case 'bottom':
                        if (index != components.length - 1) {
                            components.splice(index, 1)
                            components.splice(components.length, 0, component)
                        } else {
                            message.warning('到底啦~');
                        }
                        break;
                }
            }
        }
    },
    actions: {},
    modules: {}
})